<template>
  <div class="panel-wrap">
    <div class="panel-title">连接线</div>
    <a-row align="middle" v-if="shapeType === 'edge'">
      <a-col :span="4">宽度</a-col>
      <a-col :span="18">
        <a-slider :min="1" :max="6" :step="1" :value="globalGridAttr.strokeWidth" @change="onStrokeWidthChange" />
      </a-col>
      <a-col :span="2">
        <div class="result">{{ globalGridAttr.strokeWidth }}</div>
      </a-col>
    </a-row>
    <a-row align="middle">
      <a-col :span="4">虚线</a-col>
      <a-col :span="18">
        <a-slider
          :min="0"
          :max="6"
          :step="1"
          :value="globalGridAttr.strokeDasharray"
          @change="onStrokeDasharrayChange"
        />
      </a-col>
      <a-col :span="2">
        <div class="result">{{ globalGridAttr.strokeDasharray }}</div>
      </a-col>
    </a-row>
    <a-row align="middle">
      <a-col :span="4">连线</a-col>
      <a-col :span="20">
        <a-select style="width: 100%" :value="globalGridAttr.connector" @change="onConnectorChange">
          <a-select-option value="normal">简单连接</a-select-option>
          <a-select-option value="smooth">平滑连接</a-select-option>
          <a-select-option value="rounded">圆角连接</a-select-option>
          <a-select-option value="jumpover">跳线连接</a-select-option>
        </a-select>
      </a-col>
    </a-row>
    <a-row align="middle">
      <a-col :span="4">路由</a-col>
      <a-col :span="20">
        <a-select style="width: 100%" :value="globalGridAttr.router" @change="onRouterChange">
          <a-select-option value="normal">默认路由</a-select-option>
          <a-select-option value="orth">正交路由</a-select-option>
          <a-select-option value="oneSide">受限正交路由</a-select-option>
          <a-select-option value="manhattan">智能正交路由</a-select-option>
          <a-select-option value="metro">智能地铁线路由</a-select-option>
          <a-select-option value="er">实体关系路由</a-select-option>
        </a-select>
      </a-col>
    </a-row>
    <a-row align="middle">
      <a-col :span="4">标签</a-col>
      <a-col :span="20">
        <a-input :value="globalGridAttr.label" style="width: 100%" @change="onLabelChange" />
      </a-col>
    </a-row>
  </div>
</template>

<script>
import FlowGraph from '../../../graph'
import { changeEdge, changeStrokeWidthAndArrow } from './method'

const lineTypes = [
  'classic',
  'line',
  'block',
  'diamond',
  'circle',
  'circlePlus',
  'cross',
  'async',
  'double-edge',
  'double-line',
  'ellipse'
]

export default {
  name: 'Index',
  props: {
    globalGridAttr: {
      type: Object,
      default: null,
      require: true
    },
    id: {
      type: String,
      default: null,
      require: true
    }
  },
  data() {
    return {
      lineTypes,
      curCell: ''
    }
  },
  computed: {
    edgeIdCpt() {
      return {
        id: this.id
      }
    },
    shapeType() {
      return this.curCell && this.curCell.shape
    }
  },
  watch: {
    edgeIdCpt: {
      handler(nv) {
        const { graph } = FlowGraph
        const cell = graph.getCellById(nv.id)
        if (!cell || !cell.isEdge()) {
          return
        }
        this.curCell = cell
        const connector = cell.getConnector() || {
          name: 'normal'
        }
        const targetMarker = cell.attr('line/targetMarker')
        if (cell.shape === 'edge') {
          this.globalGridAttr.stroke = cell.attr('line/stroke')
          this.globalGridAttr.strokeWidth = cell.attr('line/strokeWidth')
          this.globalGridAttr.lineType = targetMarker && targetMarker.name ? targetMarker.name : 'line'
          this.globalGridAttr.strokeDasharray = cell.attr('line/strokeDasharray') || 0
        } else {
          this.globalGridAttr.stroke = cell.attr('outline/stroke')
          this.globalGridAttr.strokeWidth = cell.attr('outline/strokeWidth')
          this.globalGridAttr.lineType = !targetMarker ? 'double-line' : 'double-edge'
          this.globalGridAttr.strokeDasharray = cell.attr('outline/strokeDasharray') || 0
        }
        this.globalGridAttr.router = (cell.getRouter() || { name: 'normal' }).name
        this.globalGridAttr.connector = connector.name
        this.globalGridAttr.label = cell.getLabels()[0]?.attrs.text.text || ''
      },
      immediate: false,
      deep: false
    }
  },
  methods: {
    onStrokeWidthChange(val) {
      this.globalGridAttr.strokeWidth = val
      changeStrokeWidthAndArrow(this.curCell, val, this.globalGridAttr.lineType)
    },
    onStrokeChange(val) {
      // const val = e.target.value
      this.globalGridAttr.stroke = val
      if (this.shapeType === 'edge') {
        this.curCell.attr('line/stroke', val)
      }
      if (this.shapeType === 'double-edge') {
        this.curCell.attr('line/targetMarker/stroke', val)
        this.curCell.attr('outline/stroke', val)
      }
    },
    onStrokeDasharrayChange(val) {
      this.globalGridAttr.strokeDasharray = val
      if (this.shapeType === 'edge') {
        this.curCell.attr('line/strokeDasharray', val)
      }
      if (this.shapeType === 'double-edge') {
        this.curCell.attr('outline/strokeDasharray', val)
      }
    },
    onTargetMarkerSizeChange(val) {
      this.globalGridAttr.targetMarkerSize = val
      this.curCell.attr('line/targetMarker/size', parseInt(val, 10))
    },
    onConnectorChange(val) {
      this.globalGridAttr.connector = val
      this.curCell.setConnector(val)
    },
    onTypeChange(val) {
      this.globalGridAttr.lineType = val
      this.curCell = changeEdge(val, this.curCell, this.globalGridAttr)
    },
    onRouterChange(val) {
      this.globalGridAttr.router = val
      this.curCell.setRouter(val)
    },
    onLabelChange(e) {
      const val = e.target.value
      this.globalGridAttr.label = val
      this.curCell.setLabels([
        {
          attrs: {
            text: {
              text: val
            }
          },
          position: {
            distance: 0.5
          }
        }
      ])
    }
  }
}
</script>

<style lang="less" scoped>
@import '../style.less';
</style>
